<template>
  <page-header-wrapper>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="搜索">
              <a-input v-model="searchText" @keyup.enter.native="$refs.table.refresh(true)" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item>
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item>
              <div style="width: 100%;display: flex;align-items: center;flex-direction: row;justify-content: space-between">
                <a-button style="" @click="openNewModal" type="primary">新增</a-button>
                <a-alert style="width: 80%" message="输入同名学校可修改icon" type="success" />
              </div>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <s-table
      ref="table"
      :loading="loading"
      :pageSize="pagesize"
      :columns="columns"
      :data="listData"
    >

      <span slot="icon" slot-scope="text, record">
        <template>
          <img style="width: 80px;height: 80px" :src="config.baseURL+'/school/icon/'+record.schoolID" />
        </template>
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a v-if="record.deleted === 0" @click="close(record)">取消开通</a>
          <a v-else @click="open(record)">开通</a>

          <a-divider type="vertical" />
        </template>
      </span>
    </s-table>

    <a-modal v-model="newShow" title="新增" :footer="null">
      <a-input v-model="text" placeholder="请输入学校名称"/>
      <a-upload
        name="file"
        :multiple="true"
        :data="uploadData()"
        :action="config.baseURL+'/school/uploadIcon'"
        @change="closeNew"
      >
        <a-button type="primary" style="margin-top: 20px"> <a-icon type="upload" /> 上传学校logo </a-button>
      </a-upload>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getSchoolList } from '@/api/manage'
import config from '@/config/api.config'
export default {
  name: 'TableList',
  components: {
    STable
  },
  data () {
    return {
      config: config,
      uploadResult: '',
      newShow: false,
      loading: false,
      pagesize: 20,
      text: '',
      searchText: '',
      listData: parameter => {
        this.loading = true

        if (this.searchText) {
          parameter.keyword = this.searchText
        }
        return getSchoolList(Object.assign(parameter))
          .then(res => {
            console.log(res)
            this.loading = false

            return res.data
          })
      },
      // 表头
      columns: [
        {
          title: '学校名称',
          dataIndex: 'schoolName'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '是否开通',
          dataIndex: 'deleted',
          customRender: (text) => text === 0 ? '已开通' : '未开通'
        },
        {
          title: 'logo',
          width: '150px',
          scopedSlots: { customRender: 'icon' }
        },
        {
          title: '操作',
          width: '150px',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
  },
  methods: {
    closeNew () {
      this.newShow = false
      this.$refs.table.refresh(true)
    },
    uploadData () {
      return {
        schoolName: this.text
      }
    },

    openNewModal () {
      this.newShow = true
      this.uploadResult = ''
    },
    open (item) {
      item = { schoolID: item.schoolID, deleted: 0 }
      this.loading = true
      this.fetchList('/school/update', item).then(data => {
        this.$refs.table.refresh(true)
      })
    },
    close (item) {
      item = { schoolID: item.schoolID, deleted: 1 }
      this.loading = true
      this.fetchList('/school/update', item).then(data => {
        this.$refs.table.refresh(true)
      })
    }
  }
}
</script>
